<template>
  <div class="home-container">
    <van-sticky :offset-top="46">
      <div class="search-bar">
        <van-search
          v-model="searchValue"
          show-action
          background="#1989fa"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
    </van-sticky>
    <div class="product-list-wrap">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          class="product-list"
          v-model="isLoading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <ProductCell v-for="(prod) in productList" :product="prod" :key="prod.id"
                       @click="onProductClick"></ProductCell>
          <EmptyFlag v-if="!isLoading && !productList.length">没有您想要的商品...</EmptyFlag>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, PullRefresh, List, Sticky } from 'vant'

import ProductCell from './components/ProductCell'
import EmptyFlag from '@/components/EmptyFlag'

Vue.use(Search)
Vue.use(PullRefresh)
Vue.use(List)
Vue.use(Sticky)

export default {
  name: 'Home',
  components: { ProductCell, EmptyFlag },
  data () {
    return {
      refreshing: false,
      isLoading: false,
      finished: false,
      searchValue: '',
      productList: [],
      page: 0,
      size: 10,
      defaultSize: 10
    }
  },
  created () {

  },
  methods: {
    fetchProductList (load) {
      this.$api({
        url: '/product/productList.action',
        method: 'GET',
        params: {
          search: this.searchValue,
          page: this.page,
          size: this.size
        }
      }).then((result) => {
        this.isLoading = false
        this.refreshing = false

        if (result.list && result.list.length) {
          if (load) {
            this.productList = this.productList.concat(result.list)
          } else {
            this.productList = result.list
          }
        } else {
          this.productList = result.list
        }

        this.page = result.page

        if (result.totalPages > 0 && this.page === result.totalPages) {
          this.finished = true
        }
      }).catch((err) => {
        this.$toast(err.message)
      })
    },
    onLoad () {
      this.page += 1
      this.isLoading = true
      this.fetchProductList(true)
    },
    resetPageStatus () {
      this.page = 1
      this.size = this.defaultSize
      this.finished = false
    },
    onRefresh () {
      this.resetPageStatus()
      this.fetchProductList()
    },
    onSearch () {
      this.resetPageStatus()
      this.refreshing = true
      this.fetchProductList()
    },
    onProductClick (prod) {
      this.$router.push({
        path: '/product/detail',
        query: {
          id: prod.id
        }
      })
    }
  }
}
</script>

<style lang="less">
  .home-container {
    // 样式重写
    .search-bar {
      .van-search__action {
        color: #fff;
      }
    }

    .product-list-wrap {
      width: 100%;
      padding-bottom: 77px;

      .empty-flag {
        padding-bottom: 60px;
      }

      .product-list {
        padding: 10px;
      }
    }
  }
</style>
